<template>
  <div class="index">
    <div class="header">
      <div class="title">
        俯瞰 OVERLOOK
        <el-button type="primary" @click="gotoHome" class="toHomeButton"
          >退出登录</el-button
        >
      </div>
    </div>
    <div class="line"></div>
    <el-container>
      <el-aside>
        <el-menu
          class="el-menu-vertical-demo"
          :default-active="this.$route.path"
          router="true"
        >
          <el-menu-item index="/checkSystem">
            <div style="text-align: left; margin-left: 20px">
              <i class="el-icon-menu"></i>
              <span slot="title">系统几何级校正</span>
            </div>
          </el-menu-item>
          <el-menu-item index="/checkphoto">
            <div style="text-align: left; margin-left: 20px">
              <i class="el-icon-menu"></i>
              <span slot="title">控制点几何校正</span>
            </div>
          </el-menu-item>
          <el-menu-item index="/toGCPEditor">
            <div style="text-align: left; margin-left: 20px">
              <i class="el-icon-setting"></i>
              <span slot="title">控制点标注采集</span>
            </div>
          </el-menu-item>
          <el-menu-item index="/index">
            <div style="text-align: left; margin-left: 20px">
              <i class="el-icon-menu"></i>
              <span slot="title">图像重建与分解</span>
            </div>
          </el-menu-item>
          <el-menu-item index="/showMap">
            <div style="text-align: left; margin-left: 20px">
              <i class="el-icon-menu"></i>
              <span slot="title">数据查看与呈现</span>
            </div>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-main>
        <canvas id="canvas" width="800" height="600"> </canvas>
      </el-main>
    </el-container>
  </div>
</template>

<style src="../assets/css/Index.css" scoped >
</style>
<style scoped>
canvas {
  border: 2px dotted blue;
}
</style>
<script>
export default {
  data() {
    return {};
  },
  mounted() {
    // var canvas = document.getElementById("canvas");
    // var gl = canvas.getContext("webgl");
    // var coneVBO = null;
    // var coneIBO = null;
    // var vertices = [];
    // var indices = [];
    // vertices = [
    //   1.5, 0, 0, -1.5, 1, 0, -1.5, 0.809017, 0.587785, -1.5, 0.309017, 0.951057,
    //   -1.5, -0.309017, 0.951057, -1.5, -0.809017, 0.587785, -1.5, -1, 0.0, -1.5,
    //   -0.809017, -0.587785, -1.5, -0.309017, -0.951057, -1.5, 0.309017,
    //   -0.951057, -1.5, 0.809017, -0.587785,
    // ];
    // coneVBO = gl.createBuffer();
    // gl.bindBuffer(gl.ARRAY_BUFFER, coneVBO);
    // gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
    // gl.bindBuffer(gl.ARRAY_BUFFER, null);
  },
};
</script>